<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
   <link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">

<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
   
      <!-- 引入文件上传组件 webuploader 的样式 -->
    <link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">
    
    
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/jquery.form.js"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctx}/js/content.min.js?v=1.0.0"></script>
    <script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${ctx}/js/plugins/layer2.4/layer.js"></script>
    
    <!-- 引入 文件上传组件 webuploader 的js -->
    <script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>
    
    <!-- 引入 Jquery.validate.js 表单验证框架 -->
	<script src="${ctx}/js/jquery.validate.min.js"></script>
	<script src="${ctx}/js/messages_zh.min.js"></script>

    
	<style type="text/css">
	.check-error{
		color:red
	}
	
	.modalbutton{
	width: 73px;
	height: 25px;
	margin-left:12px;
	margin-top: 8px;
	font-size: 14px;
	font-family: "SimSun";
	float: left;
	}
		</style>

<script type="text/javascript">
$(function(){
	//下拉列表
	$("#pageSize").change(function(){
		console.log($("#search").val());
		window.location.href="${ctx}/task.oas?cmd=selectResult&currentPage=1&pageSize="
			+this.value+"&keyWord="+$("#search").val();
	})
	
	//监听搜搜框的键盘按下事件:如果用户按的是回车键,就触发向后台发送请求的操作
	$("#search").keyup(function(event){
		//event是js事件编程种的一个内置对象,可以获取当前用户按下键盘任意键的所有信息
		//键盘的每一个数字都是对应的ASCII码,13是Enter 键盘
		if(event.keyCode == 13){
			window.location.href="${ctx}/task.oas?cmd=selectResult&keyWord="+$("#search").val();
		}
	});
	
	var pageSize = ${Result.pageSize};
	$("#pagination").bootstrapPaginator({
		currentPage : ${Result.currentPage},//当前页
		totalPages : ${Result.totalPage},//总页数
		size : "normal",
		bootstrapMajorVersion : 3,
		alignment : "right",
		numberOfPages : 6,//显示的按钮数
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first": return "首页";
                case "prev": return "上一页";
                case "next": return "下一页";
                case "last": return "末页";
                case "page":return page;
            }
        },//改写分页按钮字样
        onPageClicked: function (event, originalEvent, type, page) {
        	window.location.href="${ctx}/task.oas?cmd=selectResult&currentPage="
				+page+"&pageSize="+pageSize+"&keyWord="+$("#search").val();
        	//pageSize为查询对象的pageSize
        	//keyWord为输入框回写后的值
        	//查询中有三个参数 currentPage,pageSize,keyWord
        },
        //指针放上去变小手
        itemContainerClass: function(type, page, current){
        	return (current==page) ? "active" : "pointer-cursor";
        	}
    });
})



 function changeTrans(element) {
		//从传过来的element对象中获取值
		var title = $(element).data("title");
		var content = $(element).data("content");
		var urgent = $(element).data("urgent")==0?"一般":$(element).data("urgent")==1?"紧急":"重大";
		//将数值格式的状态变成字符
		var time = $(element).data("strtime")+"到"+$(element).data("fintime");
		var status = $(element).data("status")==1?'已完成':'未完成';
		var person = $(element).data("person");
		var createtime = $(element).data("createtime");
			     
		//将值赋给td
		 $("#title").val(title);
		$("#content").val(content);
		$("#urgent").val(urgent);
		$("#time").val(time);
		$("#createtime").val(createtime);
		$("#person").val(person);
		$("#status").val(status);
		
		 $("#resulttitle").val(title);

		//为审核状态行设置class样式，1为成功设置成success，0为审核中设置成warning，2为审核不通过设置成danger
		var status = $(element).data("urgent")==0?"DarkGreen":$(element).data("urgent")==1?"MediumVioletRed ":"Red";
		$("#urgent ").css("color",status);
}
   
   $(function){
	   $('#send').click(function(){
	         $.ajax({
	             type: "post",
	             url: "test.json",
	             data: {username:$("#username").val(), content:$("#content").val()},
	             dataType: "json",
	             success: function(data){
	                         $('#resText').empty();   //清空resText里面的所有内容
	                         var html = ''; 
	                         $.each(data, function(commentIndex, comment){
	                               html += '<div class="comment"><h6>' + comment['username']
	                                         + ':</h6><p class="para"' + comment['content']
	                                         + '</p></div>';
	                         });
	                         $('#resText').html(html);
	                      }
	         });
	    });
   }
   </script>
   
   <script type="text/javascript">
 
   jQuery(function() {
	    var $ = jQuery,
	        $list = $('#thelist'), // thelist节点中添加文本  身份证正面  div添加  
	        $btn = $('#ctlBtn'), // 文件上传按钮   身份证正面 文件上传按钮
	        state = 'pending',
	        uploader;
	    
	    $("#modal-changeform").on("shown.bs.modal",function(){
	    	
	    
	    //初始化
	    uploader = WebUploader.create({
	        // 不压缩image
	        resize: false,

	        // 文件接收服务端。
	        server: "${ctx}/fileupload.oas",

	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        	//开始上传 按钮的id 
	        pick: '#picker' ,
	        
	     // 只允许选择图片文件。
	        accept: {
	            title: 'Images',
	            extensions: 'jpg,jpeg,bmp,png',
	            mimeTypes: 'image/*'
	        },
	        //允许上传的文件个数
	        fileNumLimit:1,
	        //单个文件最大的上传限制 1M
	        fileSingleSizeLimit :1024 * 1024 // 1M
	    });

	    // 当有文件添加进来的时候
	    uploader.on( 'fileQueued', function( file ) {
	        $list.append( '<div id="' + file.id + '" class="item">' +
	            '<h4 class="info">' + file.name + '</h4>' +
	            '<p class="state">等待上传...</p>' +
	        '</div>' );
	    });

	    // 文件上传过程中创建进度条实时显示。
	    uploader.on( 'uploadProgress', function( file, percentage ) {
	        var $li = $( '#'+file.id ),
	            $percent = $li.find('.progress .progress-bar');

	        // 避免重复创建
	        if ( !$percent.length ) {
	            $percent = $('<div class="progress progress-striped active">' +
	              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
	              '</div>' +
	            '</div>').appendTo( $li ).find('.progress-bar');
	        }

	        $li.find('p.state').text('上传中');

	        $percent.css( 'width', percentage * 100 + '%' );
	    });

	    //文件上传成功后  触发的事件  触发一个函数
	    uploader.on( 'uploadSuccess', function( file,response) {
	      
	    	// 上传的图片保存在页面中
	    	var idcard_url = response.msg;
	    	 $("#idcard_id").append("<br><img  src='${ctx}"+idcard_url+"' style='width: 150px;height: 150px' />");
	    	 
	    	 //将url 添加到  form表单的隐藏域中
	    	 $("#resultfile").val(idcard_url);
	    	 
	    	$( '#'+file.id ).find('p.state').text('已上传');
	    });

	    uploader.on( 'uploadError', function( file ) {
	    	//TODO
	        $( '#'+file.id ).find('p.state').text('上传出错');
	    });

	    uploader.on( 'uploadComplete', function( file ) {
	        $( '#'+file.id ).find('.progress').fadeOut();
	    });

	    uploader.on( 'all', function( type ) {
	        if ( type === 'startUpload' ) {
	            state = 'uploading';
	        } else if ( type === 'stopUpload' ) {
	            state = 'paused';
	        } else if ( type === 'uploadFinished' ) {
	            state = 'done';
	        }

	        if ( state === 'uploading' ) {
	            $btn.text('暂停上传');
	        } else {
	            $btn.text('开始上传');
	        }
	    });
	    
	    //出错以后回调的函数
	    uploader.on("error",function(type){
	    	alert(type);
	    	if(type == "F_EXCEED_SIZE"){
	    		layer.alert('最大只能上传1M文件', {
	    			  skin: 'layui-layer-molv' //样式类名
	    		});
	    	}
	    });

	    $btn.on( 'click', function() {
	        if ( state === 'uploading' ) {
	            uploader.stop();
	        } else {
	            uploader.upload();
	        }
	    });
	    });
	    
	    $('#modal-changeform').on('hide.bs.modal', function () {
	    
	    	uploader.destroy();
	    	});
   
	});
   
   </script>
</head>

<body class="gray-bg" >
	<div class="col-sm-12" style="font-size: 16px;">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h2 style="color: DarkGreen;font-family: Microsoft YaHei;">任务审核</h2>
			</div>
			
			<div class="ibox-content" >
				<div id="DataTables_Table_0_wrapper"
					class="dataTables_wrapper form-inline" role="grid">
					<div class="row">
					<div class="col-sm-6">
							<div class="dataTables_length" id="DataTables_Table_0_length">
								<label>每页 
								<select id="pageSize"  class="form-control input-sm">
								<!-- El表达式取出值并与数值比较 -->
										<option value="10" ${Result.pageSize eq 10 ? 'selected':''}>10</option>
										<option value="25" ${Result.pageSize eq 25 ? 'selected':''}>25</option>
										<option value="50" ${Result.pageSize eq 50 ? 'selected':''}>50</option>
										<option value="100" ${Result.pageSize eq 100 ? 'selected':''}>100</option></select> 条记录
								</label>
							</div>
						</div>
					<div class="col-sm-6">
							<div id="DataTables_Table_0_filter" class="dataTables_filter">
								<label>查找：<input class="form-control input-sm"
									placeholder="请输入标题或申请人"
									id="search" type="search" value="${keyWord}" ></label>
							</div>
					</div>
					</div>
					
					<table
						class="table table-striped table-bordered table-hover dataTables-example dataTable"
						id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
						<thead>
							<tr role="row" >
							<th class="sorting_asc" tabindex="0" >项目名称</th>
								<th class="sorting_asc" tabindex="0" >处理时间&nbsp;</th>
								<th class="sorting_asc" tabindex="0" >执行人员</th>
								<th class="sorting_asc" tabindex="0" >状态</th>
								<th class="sorting_asc" tabindex="0" >紧急程度</th>
								<th class="sorting_asc" tabindex="0" >操作</th>
							</tr>
						</thead>
						<tbody>
						
						<!-- forEach循环 -->
						<c:forEach items="${Result.dataList}" var="Result">
						<tr class="gradeA odd" style="font: SimSun">
						<td>${Result.title}</td><!--项目名称 -->
						<td>${Result.strtime}到${Result.fintime}</td><!-- 处理时间 -->
							<td>${Result.person}</td><!-- 执行人员-->
						<td  >${Result.status==1? '已完成':Result.status==0?'处理中':'未完成'}</td> <!-- El表达式中三目运算 -->
						<td id="tdurgent">${Result.urgent==0?'一般':Result.urgent==1?'紧急':'重大'}</td><!-- 紧急程度-->
						<td>
						
					 
					 	<!-- 修改按钮 -->
					   <a  onclick="changeTrans(this)"   data-toggle="modal" class="btn btn-warning"  href="form_basic.html#modal-changeform" 
					   	 data-title="${Result.title}"
					    data-content="${Result.content}"
					    data-status="${Result.status}"
					    data-urgent="${Result.urgent}"
					    data-person="${Result.person}"
					    data-createtime="${Result.createtime}"
					    data-strtime="${Result.strtime}"
					    data-fintime="${Result.fintime}"
					    
					   >&nbsp;成&nbsp;果&nbsp;提&nbsp;交&nbsp;</a>
						</td>
						</tr>
						</c:forEach>
						</tbody>
					</table>
			
				<div class="row">
						<div class="col-sm-4">
							<div class="dataTables_info" >
							第${Result.currentPage}页 共${Result.totalPage}页 总计<span id="totalCount">${Result.totalCount}</span>条数据<!-- El表达式取值 -->
						</div>
								</div>
							<div class="col-sm-6">
							<div class="dataTables_paginate paging_simple_numbers"
								id="DataTables_Table_0_paginate">
								<ul  id="pagination"></ul>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>
	</div>


	<!-- Model弹框修改 -->
	<div id="modal-changeform" class="modal fade" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12 ">
							<h2 class=" m-b" style="color: SaddleBrown;font-family:Microsoft YaHei ">任务成果提交</h2>
						<!-- 表单一 -->		
						<div class="ibox-content">
						<form class="form-horizontal" action="" method="post" id="changeForm">
						
						
							<div class="form-group" >
								<label class="col-sm-3 control-label">任务标题</label>
								<div class="col-sm-7">
									<input id="title" type="text" name="title" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
								
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容</label>
								<div class="col-sm-7">
									<input type="text" id="content" name="content" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
							
								<div class="form-group">
								<label class="col-sm-3 control-label">紧急程度</label>
								<div class="col-sm-7">
									<input type="text" id="urgent" name="urgent" 
										class="form-control"  style="border: none;font-weight: 600;" readonly="readonly">
								</div>
							</div>
							

								<div class="form-group">
								<label class="col-sm-3 control-label">任务处理时间</label>
								<div class="col-sm-7">
									<input type="text" id="time" name="time" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">任务创建时间</label>
								<div class="col-sm-7">
									<input type="text" id="createtime" name="createtime" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">执行人&nbsp;</label>
								<div class="col-sm-7">
									<input type="text" id="person" name="person" style="border: none;" readonly="readonly"
										class="form-control" >
								</div>
							</div>
							
							
								<div class="form-group">
								<label class="col-sm-3 control-label">任务状态&nbsp;</label>
								<div class="col-sm-7">
									<input type="text" id="status" name="status" style="border: none;" readonly="readonly"
										class="form-control" >
								</div>
							</div>
							
							
						</form>
						
					</div>
					</div>
					
					
					<!-- 表单二提交 -->
							<div class="col-sm-12 ">
						<div class="ibox-content">
						<form class="form-horizontal" action="${pageContext.request.contextPath}/task.oas?cmd=changeResult" method="post" id="changeForm">
						
						
							<input type="hidden" id="resulttitle"  name="resulttitle" />
							
								<div class="form-group">
								<label class="col-sm-3 control-label">成果描述</label>
								<div class="col-sm-7">
									<input type="text" id="resultdir" name="resultdir" style="border: none;" 
										class="form-control" >
								</div>
							</div>
							
							
							
							   	<div class="form-group">
	      					  <label class="col-sm-3 control-label">成果文件</label>
	      					  <div class="col-sm-7">
									<div id="uploader" class="wu-example">
									    <!--用来存放文件信息-->
									    <div id="thelist" class="uploader-list"></div>
									    <div class="btns" id="idcard_id">
									        <div id="picker">选择文件</div>
									        <!-- button如果不指定   type 为button 默认是submit -->
									        
									        <button id="ctlBtn" type="button" class="btn btn-default">开始上传</button>
									    </div>
									</div>
									<input type="hidden" id="resultfile"  name="resultfile" />
								</div>
   							 </div>
   							 
   							 
   							 
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn  btn-primary" type="submit">&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;</button>
									<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<button class="btn  " type="reset">&nbsp;&nbsp;重&nbsp;&nbsp;置&nbsp;&nbsp;</button>
								</div>
							</div>
							
						</form>
						
					</div>
					</div>
					
					
					
				</div>
			</div>
		</div>
	</div>
	</div>

</body>

</html>
